<template>
  <header ref="header" id="header" class="header bg-white animated">
    <div class="navbar-container">
      <router-link to="/" class="navbar-logo" @click.native="handlePage">

        <!--        <img :src="headerConfig.avatar" alt=""/>-->

        <svg xmlns="http://www.w3.org/2000/svg"
             width="96" height="38">
          <text x="48" y="19" alignment-baseline="middle" text-anchor="middle"
                font-family="Josefin Sans','PingFang SC',sans-serif" font-size="26">
            木之下
          </text>
          <line x1="0" y1="18" x2="96" y2="24" stroke="#333"/>
          <line x1="0" y1="30" x2="96" y2="31" stroke="#333"/>
        </svg>
      </router-link>
      <div class="navbar-menu">

        <a :class="{current:$route.path === item.route}" :key="index"
                     v-for="(item,index) of headerConfig.navMenu" :href="item.route">
          {{ item.title }}
          <ul v-if="item.children.length > 0">
            <li v-for="tmp of item.children">
              <router-link :to="tmp.route">{{ tmp.title }}</router-link>
            </li>
          </ul>
        </a>

      </div>

      <router-link :to="headerConfig.searchPage" class="navbar-search">
        <span class="icon-search"></span>
      </router-link>

      <!-- 移动端显示 -->
      <div @click="showMobileMenu = !showMobileMenu" class="navbar-mobile-menu"
           :class="{'navbar-mobile-menu-on':showMobileMenu}">
        <span class="icon-menu cross"><span class="middle"></span></span>
        <ul ref="mobileMenu">
          <li :class="{'navbar-menu-categorys':item.children.length > 0}"
              :key="index"
              v-for="(item,index) of headerConfig.navMenu">
            <a :href="item.route" v-if="item.type === 1">{{ item.title }}</a>
            <router-link :to="item.route" v-else>
              {{ item.title }}
            </router-link>
            <ul v-if="item.children.length > 0">
              <li v-for="tmp of item.children">
                <router-link :to="tmp.route">{{ tmp.title }}</router-link>
              </li>
            </ul>
          </li>
        </ul>
      </div>

    </div>
  </header>
</template>

<script>

  import {getArticleList, getUserInfo} from "@/api/home";
  import {getBlogInfo, getCategory} from "@/api/category";
  import settings from "@/settings";

  import '@/assets/scss/GreenBook/font-awesome.min.css'
  import '@/assets/scss/GreenBook/style.min.css'
  import '@/assets/scss/GreenBook/top-style.css'

  import {L2Dwidget} from 'live2d-widget'
  import {eventBus} from "@/utils/Bus";
  import {mapState} from "vuex";

  export default {
    name: "vue-header",
    metaInfo() {
      return {
        title: `${this.subTitle} -${this.blogTitle}`,
        meta: this.meta
      }
    },
    computed:{
      ...mapState({
        blogTitle: state => state.blogTitle,
        subTitle: state => state.subTitle
      }),
    },
    data() {
      return {
        headerConfig: {
          siteUrl: window.location.href,
          avatar: require('./images/logo1.png'),
          navMenu: [
            {
              title: "分类", route: "/archive",
              children: [
                {title: "点滴记录", route: ""},
                {title: "资源分享", route: ""},
                {title: "代码记录", route: ""},
                {title: "计算科学", route: ""},
              ]
            },
            {title: "影视", route: "/movies", children: []},
            {title: "简笔", route: "/cross", children: []},
            {title: "下载", route: "/download", children: []},
            {title: "音乐", route: "/music", children: []},
            {title: "友链", route: "/links", children: []},
            {title: "关于", route: "/about", children: []},
            {title: "后台", route: "/admin", children: [],type:1},
            {title: "相册", route: "/photos", children: []},
          ],
          searchPage: "/search"
        },
        beforeScrollTop: 0,
        afterScrollTop: 0,
        up: -1,
        showMobileMenu: false,
        blogInfo: {},
        // pageName: '',
        meta:[],
      }
    },
    methods: {
      handlePage() {
        // eventBus.$emit('handlePage',1)
      },
      scroll() {
        let scrollPos;
        if (typeof window.pageYOffset !== 'undefined') {
          scrollPos = window.pageYOffset;
        } else if (typeof document.compatMode !== 'undefined' && document.compatMode !== 'BackCompat') {
          scrollPos = document.documentElement.scrollTop;
        } else if (typeof document.body !== 'undefined') {
          scrollPos = document.body.scrollTop;
        }
        return scrollPos
      },
      windowScroll(e) {
        let top = document.documentElement.scrollTop
        let _that = this
        return function () {
          if (top > document.documentElement.scrollTop) {
            _that.up = 0
          } else {
            _that.up = 1
          }
          top = document.documentElement.scrollTop
        }
      },
      getUserInfo() {
        getUserInfo().then(({data}) => {
        })
      },
      getCategory() {
        getCategory().then(({data}) => {
          let nav = this.headerConfig.navMenu
          nav[0].children = data.data.map((item) => {
            return {title: item.categoryTitle, route: `/category/${item.categoryURI}`}
          })
        })
      },
      pageChange(route) {
        //let href = this.$router.resolve(route).href
        //window.open(route,"_self")
        //this.$router.replace(href)
      },
      getBlogInfo() {
        getBlogInfo().then(({data}) => {
          for (let item of data.data.blogInfo) {
            this.blogInfo[item.oId] = item.optionValue
          }
          // this.pageName = this.blogInfo.blogTitle
          this.$store.commit("setStoreValue",{
            blogTitle :  this.blogInfo.blogTitle,
            subTitle:this.blogInfo.blogSubtitle
          })
          this.meta = [
            {name: "Keywords", content: this.blogInfo.metaKeywords},
            {name: "Description", content: this.blogInfo.metaDescription}
          ]
          this.$store.commit("setStoreValue",{
            blogInfo:this.blogInfo
          })
        })
      }
    },
    mounted() {
      new Headroom(this.$el, {
        offset: 0,
        tolerance: 0,
        classes: {initial: "headroom", pinned: "slideDown", unpinned: "slideUp"}
      }).init();
      this.getUserInfo()
      this.getCategory()
      this.getBlogInfo()


      //https://github.com/EYHN/hexo-helper-live2d/blob/HEAD/README.zh-CN.md

      L2Dwidget.init({
        pluginRootPath: 'https://cdn.jsdelivr.net/gh/Arrowfield/live2d-vue@master/live2dw/',
        pluginJsPath: 'lib/',
        pluginModelPath: 'live2d-widget-model-shizuku/assets/',
        // tagMode: true,
        debug: false,
        model: {jsonPath: 'https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json'},
        display: {
          position: 'left', width: 200, height: 400,
          hOffset: -40,
          vOffset: -80
        },
        mobile: {show: true},
        log: false,
        dialog: {
          // 开启对话框
          enable: true,
          "script": {
            'tap body': '哎呀！别碰我！',
            'tap face': '人家是在认真写博客哦--前端妹子',
          }
        }
      })


    }
  }
</script>
<style lang="scss" scoped>
  .header {
    font-family: 'Arizonia', cursive;
  }

  .navbar-mobile-menu .navbar-menu-categorys ul {
    position: absolute;
    top: 0;
    left: 0;
    right: unset;
    width: 100px;
    margin: 5px 0 0 -95px;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, .95);
    -webkit-transition: .5s;
    transition: .5s;

  }

  .navbar-mobile-menu .navbar-menu-categorys ul:before {
    position: absolute;
    top: 9px;
    right: -7px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgba(255, 255, 255, .95);
    content: '';
  }

  .navbar-menu a {
    padding: 30px 15px;
    position: relative;

    ul {
      &:before {
        position: absolute;
        top: -7px;
        left: 43px;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        border-bottom: 7px solid rgba(238, 238, 238, .95);
        content: '';
      }

      li {
        display: inline;
        overflow: hidden
      }

      position: absolute;
      left: 50%;
      width: 100px;
      margin: -10px 0 0 -50px;
      padding: 0;
      border-radius: 15px;
      background-color: rgba(238, 238, 238, .95);
      opacity: 0;
      visibility: hidden;
      transition: .3s;
      box-shadow: 0 2px 4px rgb(0 0 0 / 30%);

      li a {
        font-size: 15px;
        line-height: 1;
        display: block;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0;
        padding: 15px;
      }
    }

    &:before {
      content: '';
      position: absolute;
      left: 50%;
      right: 50%;
      top: 70px;
      background: #ec5454;
      height: 3px;
      transition: all .2s;
      transition-duration: .3s;
      transition-timing-function: ease-out;
      display: block;
      opacity: 0;
    }
  }

  .navbar-menu a:hover {
    background-color: #ffeded54;
    color: #ec5454;
    /*border-radius: 15px;*/

    &:before {
      left: 0;
      right: 0;
      opacity: 1
    }

    ul {
      opacity: 1;
      visibility: visible;
    }
  }
</style>
